<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .strong{
            font-weight: 1000;
            font-size: 60px;
        }

        .smooth{
            font-size: 20px;
            background-color: red;
        }
    </style>
</head>
<body>
    <ul>
        <li class="smooth">PHP</li>
        <li class="smooth">Javascript</li>
        <li class="smooth">Vue.js</li>
    </ul>
    <script>
        var liObj=document.querySelectorAll("li")[1];
        if(!liObj.classList.contains("strong")){
            liObj.classList.add("strong");
        }
        liObj.classList.toggle("smooth");
        document.querySelectorAll("li").forEach( //forEach(遍历数组) 方法用于调用数组的每个元素，并将元素传递给回调函数。(对于空数组是不会执行回调函数的。)
            (ele)=>{    //此地ele为第一个值,ele可以随意命名不一定是ele
                ele.classList.remove("smooth");
            }
        );
        var lis=document.querySelectorAll("li");
        for(li of lis){
            li.classList.remove("smooth");
        }
    </script>
</body>
</html>